<template>
  <div>
    <el-card>
      <div slot="header">
        <el-button type="primary" size="mini"  @click="dialogFormVisible = true">新增</el-button>
      </div>

      <el-dialog title="热销详情" width="80%" :visible.sync="dialogFormVisible">
        <el-card>
          <div slot="header">条件查询</div>
            <el-row :gutter="20" ref="rulesForm">
              <el-col :span="4" >
                  <el-input v-model="form.name" placeholder="商品名称/模糊查询"></el-input>
              </el-col>
              <el-col :span="4">
                  <el-input v-model="form.productSn" placeholder="商品货号"></el-input>
              </el-col>
              <el-col :span="4">
                <el-select v-model="form.brandId" placeholder="品牌">
                  <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select v-model="form.publishStatus" placeholder="上架状态">
                  <el-option label="上架" value="0"></el-option>
                  <el-option label="未上架" value="1"></el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select v-model="form.verifyStatus" placeholder="审核状态">
                  <el-option label="审核" value="0"></el-option>
                  <el-option label="未审核" value="1"></el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-button size="mini" @click="clearForm"
                  >重置</el-button
                >
                <el-button type="primary" size="mini" @click="search"
                  >搜索</el-button
                >
              </el-col>
            </el-row>
        </el-card>
        <!-- 新增内商品列表数据 -->
        <el-card>
          <el-table
            :data="list_pro"
            border
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="50" fixed="left" align="center" />

            <el-table-column
              label="选择"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <el-radio v-model="radio" @change="isEdit(scope.row)" :label="scope.row.id"><span></span></el-radio>
              </template>
              
              
            </el-table-column>

            <el-table-column
              label="商品图片"
              align="center"
              width="200"
            >
              <template slot-scope="scope">
                <img style="width:50px;height:50px;" :src="scope.row.pic" alt="">
              </template>
            </el-table-column>

            <el-table-column
              label="商品名称"
              align="center"
              width="400"
            >
              <template slot-scope="scope">
                <p>{{scope.row.name}}</p>
                <p>品牌:{{scope.row.brandName}}</p>
                <p>{{scope.row.description}}</p>
              </template>
            
            </el-table-column>

            <el-table-column
              label="商品价格"
              align="center"
              width="200"
            >
              <template slot-scope="scope">
                  <p>原价{{scope.row.originalPrice}}</p>
                  <p>现价{{scope.row.price}}</p>
              </template>
            </el-table-column>

            <el-table-column
              prop="productCategoryName"
              label="商品类别"
              align="center"
              width="200"
            >
            </el-table-column>

            <el-table-column
              prop="weight"
              label="重量"
              align="center"
              width="200"
            >
            </el-table-column>

          </el-table>
          <!-- 分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.currentPage"
              :page-sizes="page.pageSizes"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total">
            </el-pagination>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 编辑限时活动 -->
      <el-dialog title="编辑限时活动" :visible.sync="editFormVisible">
        <el-col :span="12">
          <div>商品原价 {{list_act.originalPrice}}</div>
        </el-col>
        <el-col :span="12">
          <div>商品名称 {{list_act.name}}</div>
        </el-col>
        <el-col :span="12">
          <div>促销价格 <el-input-number size="mini" v-model="list_act.promotionPrice" label="描述文字"></el-input-number></div>
        </el-col>  
        <el-col :span="12">
          <div>排序 <el-input-number size="mini" v-model="list_act.sort" label="描述文字"></el-input-number></div>
        </el-col>  
        <el-col :span="12">
          <div>开始时间 
            <el-date-picker
              v-model="list_act.promotionStartTime"
              type="datetime"
              size="mini"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </el-col>  
        <el-col :span="12">
          <div>结束时间 
            <el-date-picker
              v-model="list_act.promotionEndTime"
              type="datetime"
              size="mini"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </el-col>  
        <el-col :span="12">
          <div>活动限购数量 
            <el-input style="width:100px" v-model="list_act.promotionPerLimit" size="mini" type="number"></el-input>
          </div>
        </el-col>  
        <el-col :span="12">
          <div>商品图片 
            <img style="width:150px;height:150px;" :src="list_act.pic" alt="">
          </div>
        </el-col>  
        <div slot="footer" class="dialog-footer">
          <el-button @click="editFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editActive">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 页面数据渲染 -->
      <el-table :data="list" border style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="序号"
          align="center"
          width="50"
        >
        </el-table-column>

        <el-table-column label="商品图片" align="center" width="150">
          <template slot-scope="scope">
            <img
              style="width: 100px; height: 100px"
              :src="scope.row.pic"
              alt=""
            />
          </template>
        </el-table-column>

        <el-table-column label="活动时间" align="center" width="250">
          <template slot-scope="scope">
            <p>开始时间:{{ scope.row.promotionStartTime }}</p>
            <p>结束时间:{{ scope.row.promotionEndTime }}</p>
          </template>
        </el-table-column>

        <el-table-column
          prop="isCompare"
          label="是否过期"
          align="center"
          width="100"
        >
        </el-table-column>

        <el-table-column
          prop="name"
          label="商品名称"
          align="center"
          width="300"
        >
        </el-table-column>

        <el-table-column
          prop="brandName"
          label="品牌名称"
          align="center"
          width="200"
        >
        </el-table-column>

        <el-table-column
          prop="price"
          label="商品价格"
          align="center"
          width="150"
        >
        </el-table-column>

        <el-table-column
          prop="productCategoryName"
          label="商品类别"
          align="center"
          width="150"
        >
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          width="300"
        >
        </el-table-column>

        <el-table-column fixed="right" label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="color: red"
              @click="del(scope.row.recommendId)"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { findAllRecommends, delRecommend,productsByPage,findAllBrand,addRecommend,updateRecommend } from '@/api/market/limitActive'
import mixin from "@/mixins/index"
export default {
  mixins:[mixin],
  data() {
    return {
      //限时活动数据
      list: [],
      //商品列表数据
      list_pro:[],
      //编辑活动
      list_act:{},
      //选择内单选框
      radio:'',
      //打开商品列表
      dialogFormVisible: false,
      // 打开编辑
      editFormVisible:false,
      newActive:{
        //价格计数器
        priNum:null,
        //选择开始时间
        beginTime:'',
        //选择结束时间
        endTime:'',
      },
      brandList:[],
      //购买限制数量
      limitNum:null,
      form: {},
      formLabelWidth: '120px'
    }
  },
  created() {
    this.getData()
  },
  methods: {
    search(){
      console.log(this.form)
      this.getData()
    },
    //获取限时活动数据
    getData() {
      //获取限时活动数据列表
      findAllRecommends().then((res) => {
        console.log(res)
        this.list = res.data.items
        this.list.forEach((res) => {
          var startTime = this.getTimes(res.promotionEndTime)
          var endTime = this.getTimes(Date())
          if (startTime < endTime) {
            res.isCompare = '过期'
          } else {
            res.isCompare = '否'
          }
        })
      })
      //商品列表获取
      productsByPage(this.page.currentPage,this.page.size,this.form).then(res=>{
        console.log(res);
        this.list_pro = res.data.rows
        this.page.total = res.data.total
      })
      //品牌列表获取
      findAllBrand().then(res=>{
        this.brandList=res.data.items
      })
    },
    //重置表单
    clearForm(){
      // this.$refs.rulesForm.resetFields();
      this.form={}
    },
    //每页条数
    handleSizeChange(val){
      this.page.size = val
      this.page.currentPage = 1
      this.getData()
    },
    //当前页数
    handleCurrentChange(val){
      this.page.currentPage = val
      this.getData()
    },
    //将时间转变为时间戳
    getTimes(val) {
      var time1 = val
      var date = new Date(time1.replace(/-/g, '/')) //开始时间
      var time2 = date.getTime()
      return time2
    },
    rTime(date) {
      var json_date = new Date(date).toJSON()
      console.log(json_date)
      return new Date(new Date(json_date) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    },
    //删除商品
    del(val) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRecommend(val).then((res) => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getData()
          } else {
            this.$message.error('删除失败')
          }
        })
      })
    },
    //编辑活动提交
    editActive(){
      if(this.list_act.productId){
        updateRecommend(this.list_act).then(res=>{
          // console.log(res);
          this.list_act={}
          this.editFormVisible=false
          this.getData()
        })
      }else{
        this.list_act.productId=this.list_act.id
        addRecommend(this.list_act).then(res=>{
          // console.log(res);
          this.list_act={}
          this.editFormVisible=false
          this.getData()
        })
      }
      
    },
    isEdit(val){
      //编辑活动显示
      this.editFormVisible=true
      this.list_act=val
    },
  }
}
</script>


<style lang="scss">
.main-container {
  background-color: #f0f2f5;
}
.box-card {
  margin: 20px;
}
</style>
<style lang="scss" scoped>
</style>